import Taro, { Component } from '@tarojs/taro'
import { View, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
import './medicallist.css'
import { AtSearchBar, AtSwipeAction, AtList, AtListItem, AtDrawer, AtGrid, AtCalendar } from 'taro-ui'
import paixu from '../../../img/paixu.png'
import shaixuan from '../../../img/shaixuan.png';
import biaoqian from '../../../img/biaoqian.png'
import tianjia from '../../../img/tianjia.png';
import { $navigateTo,$redirectTo } from '../../../global';
import reactMixin from 'react-mixin';
import myJs from '../../pages/medicallist/medicallistjs.js'
import app from '../../../main.js'

export default class MedicalList extends Component {

  config = {
    navigationBarTitleText: '病历列表'
  }
  constructor () { 
        super(...arguments); 
        this.state = this.getData(); 
    }
  constructor() {
    super(...arguments)
    this.state = {
      value: ''
    }
  }
  onChange(value) {
    this.setState({
      value: value
    })
  }
  show=(item,index)=>{
    if(index===1){
      this.setState({
        show: true
      });
    }
    
  }

  checkMedicalHistory=()=>{
    app.redirectTo("../chakanbingli1/chakanbingli1") 
  }
  go=(item,index)=>{
      if(index===0){
        app.redirectTo("../labelmanage/labelmanage")
      }else{
        app.redirectTo("../tianjiabingli1/tianjiabingli1");
      }
  }
  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    return (
      <View className='medical-list'>
        <AtSearchBar
          value={this.state.value}
          onChange={this.onChange.bind(this)}
        />
        <AtDrawer
          right
          show={this.state.show}
          items={['菜单1', '菜单2']}
        >
        </AtDrawer>
        <AtGrid onClick={this.show}  className='jump-btn' mode='rect' columnNum='2' data={
            [
              {
                image: paixu,
                value: '时间排序'
              },
              {
                image: shaixuan,
                value: '月份筛选'
              }
            ]
          } />
        <AtList onClick={this.checkMedicalHistory}>      
          <AtSwipeAction options={[
            {
              text: '取消',
              style: {
                backgroundColor: '#6190E8'
              }
            },
            {
              text: '删除',
              style: {
                backgroundColor: '#FF4949'
              }
            }
          ]}>
            <AtListItem onClick={this.checkMedicalHistory} title='姓名：黎霞古' note='疾病种类：风湿，白内障' arrow='right' extraText='2018年12月22日' />
          </AtSwipeAction>
          <AtSwipeAction options={[
            {
              text: '取消',
              style: {
                backgroundColor: '#6190E8'
              }
            },
            {
              text: '删除',
              style: {
                backgroundColor: '#FF4949'
              }
            }
          ]}>
            <AtListItem onClick={this.checkMedicalHistory} title='姓名：陈四亲' note='疾病种类：青光眼，风湿' arrow='right' extraText='2018年12月30日' />
          </AtSwipeAction>
          <AtSwipeAction
            options={[
              {
                text: '取消',
                style: {
                  backgroundColor: '#6190E8'
                }
              },
              {
                text: '删除',
                style: {
                  backgroundColor: '#FF4949'
                }
              }
            ]}
          >
            <AtListItem onClick={this.checkMedicalHistory} title='姓名：西欣喜' note='疾病种类：青光眼，白内障' arrow='right' extraText='2018年12月30日' />
          </AtSwipeAction>
        </AtList>
      </View>
    )
  }
}
reactMixin.onClass(MedicalList,myJs);
